/*
 * @Author: your name
 * @Date: 2020-03-27 14:52:00
 * @LastEditTime: 2020-04-02 22:55:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-imooc-ebook\src\utils\mixin.js
 */
import { mapGetters, mapActions } from 'vuex'
import { themeList, addCss, removeAllCss, getReadTimeByMinute } from './book'
import { saveLocation, getBookmark, getBookShelf, saveBookShelf } from './localStorage'
import { gotoBookDetail, appendAddToShelf } from './store'
import { shelf, changeGroup } from '../api/store'

export const storeShelfMixin = {
  computed: {
    ...mapGetters([
    'isEditMode',
    'shelfList',
    'shelfSelected',
    'shelfTitleVisible',
    'offsetY',
    'shelfCategory',
    'currentType'
    ])
  },
  methods: {
    ...mapActions([
    'setIsEditMode',
    'setShelfList',
    'setShelfSelected',
    'setShelfTitleVisible',
    'setOffsetY',
    'setShelfCategory',
    'setCurrentType'
    ]),
    showBookDetail(book) {
      gotoBookDetail(this, book)
    },
    // 获取指定分组名的指定分组，存储到vuex，这样可以直接使用
    // filter返回的是一个数组
    getCategoryList(title) {
      // console.log('进入获取shelfCategory的方法')
      // console.log('this.getShelfList()', this.getShelfList())
      this.getShelfList().then(() => {
        // 获取到书架列表做一个过滤，filter返回的是数组
        const categoryList = this.shelfList.filter(book => book.groupName === title)[0]
        console.log('获取分组下的书籍列表', title, categoryList)
        // 将他存储到vuex中，此时shelfCategory就有分组数据了。
        this.setShelfCategory(categoryList)
      })
    },
    // 获取书籍列表
    getShelfList() {
      // console.log('获取书架列表方法')
      let shelfList = []
      return shelf().then(response => {
        // console.log('书架列表', response.result.map(item => {
        //   if (item.fileName) return item.fileName
        //   else return item.list.map(groupInfo => groupInfo.fileName)
        // }))
        if (response && response.result) {
          console.log('书架列表', response.result)
          // 加后面的加号
          shelfList = appendAddToShelf(response.result)
          // 存到localForage中
          saveBookShelf(shelfList)
          // 将书架列表存到vuex里，return一个promise对象出去
          this.setShelfList(shelfList)
        }
      })
      // let shelfList = getBookShelf()
      // if (!shelfList) {
      //   shelf().then(response => {
      //     console.log('书架列表', response)
      //     if (response && response.result) {
      //       // console.log('书架列表', response.result)
      //       // 将书架的数据存储到shelfList中，vuex方便使用
      //       shelfList = appendAddToShelf(response.result)
      //       // 存到localForage中
      //       saveBookShelf(shelfList)
      //       // 将书架列表存到vuex里，return一个promise对象出去
      //       return this.setShelfList(shelfList)
      //     }
      //   })
      // } else {
      //   console.log('localStorage存在书架列表时，获取书架列表')
      //   return this.setShelfList(getBookShelf())
      // }
    },
    // 移出分组方法
    moveOutOfGroup(group) {
      const bookNames = this.shelfSelected.map(item => item.fileName)
      // console.log('移出分组的bookName数组', bookNames)
      changeGroup(group.groupId, bookNames).then(res => {
        // console.log('移动分组返回', res)
        // 更新书架列表
        shelf().then(response => {
          if (response && response.result) {
            // console.log('书架列表', response.result)
            const list = appendAddToShelf(response.result)
            // 存到localForage中
            saveBookShelf(list)
            // 将书架列表存到vuex里，return一个promise对象出去
            this.setShelfList(list)
            // 更新分组列表
            if (this.currentType === 2) {
              this.getCategoryList(this.shelfCategory.groupName)
            }
          }
        })
      })
      this.$emit('showMyToast', this.$t('shelf.moveBookInSuccess').replace('$1', group.groupName))
      this.onComplete()
    }
  }
}

export const storeHomeMixin = {
  computed: {
    ...mapGetters([
      'offsetY',
      'hotSearchOffsetY',
      'flapCardVisible'
    ])
  },
  methods: {
    ...mapActions([
      'setOffsetY',
      'setHotSearchOffsetY',
      'setFlapCardVisible'
    ]),
    showBookDetail(book) {
      console.log('showBookDetail')
      // 路由的跳转
      this.$router.push({
        // 路径
        path: '/store/detail',
        // 详情页需要的参数
        query: {
          fileName: book.fileName,
          category: book.categoryText
        }
      })
    }
  }
}

export const ebookMixin = {
  computed: {
    ...mapGetters([
      'fileName',
      'menuVisible',
      'settingVisible',
      'defaultFontSize',
      'defaultFontFamily',
      'fontFamilyVisible',
      'defaultTheme',
      'bookAvailable',
      'progress',
      'section',
      'isPaginating',
      'currentBook',
      'navigation',
      'cover',
      'metadata',
      'paginate',
      'pagelist',
      'offsetY',
      'isBookmark'
    ]),
    // 主题列表
    themeList() {
      return themeList(this)
    },
    getSectionName() {
      // if (this.section) {
      //   const sectionInfo = this.currentBook.section(this.section)
      //   if (sectionInfo && sectionInfo.href && this.currentBook && this.currentBook.navigation) {
      //     // 获取相应的目录,label就是章节名,get方法只能获取一级目录
      //     return this.currentBook.navigation.get(sectionInfo.href).label
      //     // console(this.currentBook.navigation.get(sectionInfo.href))
      //   }
      // }
      // 已经解析了目录navigation
      return this.section ? this.navigation[this.section].label : ''
    }
  },
  methods: {
    // 做映射
    ...mapActions([
      'setFileName',
      'setMenuVisible',
      'setSettingVisible',
      'setDefaultFontSize',
      'setDefaultFontFamily',
      'setFontFamilyVisible',
      'setDefaultTheme',
      'setBookAvailable',
      'setProgress',
      'setSection',
      'setIsPaginating',
      'setCurrentBook',
      'setNavigation',
      'setCover',
      'setMetadata',
      'setPaginate',
      'setPagelist',
      'setOffsetY',
      'setIsBookmark'
    ]),
    initGlobalStyle() {
      // 清除前面的所有相同link标签,减少加载
      removeAllCss()
      switch (this.defaultTheme) {
        case 'Default':
          addCss(`${process.env.VUE_APP_RES_URL}/theme/theme_default.css`)
          break
        case 'Eye':
          addCss(`${process.env.VUE_APP_RES_URL}/theme/theme_eye.css`)
          break
        case 'Gold':
          addCss(`${process.env.VUE_APP_RES_URL}/theme/theme_gold.css`)
          break
        case 'Night':
          addCss(`${process.env.VUE_APP_RES_URL}/theme/theme_night.css`)
          break
        default:
          addCss(`${process.env.VUE_APP_RES_URL}/theme/theme_night.css`)
          break
      }
    },
    // 只要切换进度,章节都要更新
    // 在章节切换完成后,要实现进度的同步显示,所以要刷新当前位置
    refreshLocation() {
      // 通过rendition对象的API:currentLocation(),获取到currentLocation对象,
      // 这个对象里面:start.cfi会给到本页开始时定位cfi,end.cfi结束时的定位cfi,index:第几章,page:处在当前章的第几页,total:当前章共有多少页,location:第几页(总页),percentage:进度百分比
      const currentLocation = this.currentBook.rendition.currentLocation()
      // console.log(currentLocation)
      if (currentLocation && currentLocation.start) {
        // 保存阅读进度功能
      const startCfi = currentLocation.start.cfi
      // console.log(currentLocation)
      // progress进度百分比
      const progress = this.currentBook.locations.percentageFromCfi(currentLocation.start.cfi)
      // console.log(progress, currentLocation, startCfi)
      // console.log(progress)
      // Math.floor()向下取整
      this.setProgress(Math.floor(progress * 100))
      // section的信息进行刷新
      this.setSection(currentLocation.start.index)
      saveLocation(this.fileName, startCfi)
      const bookmark = getBookmark(this.fileName)
      // console.log(bookmark)
      if (bookmark) {
        // some()方法表示下面一个返回true整体返回true
        if (bookmark.some(item => item.cfi === startCfi)) {
          this.setIsBookmark(true)
        } else {
          this.setIsBookmark(false)
        }
      } else {
        this.setIsBookmark(false)
      }
      // 进度信息
      if (this.pagelist) {
        // 获取总页数
        const totalPage = this.pagelist.length
        const currentPage = currentLocation.start.location
        if (currentPage && currentPage > 0) {
          // 设置分页信息
          this.setPaginate(currentPage + '/' + totalPage)
        } else {
          this.setPaginate('')
        }
      } else {
        // 分页未完成
        this.setPaginate('')
      }
      }
    },
    // cb()回调函数，cb回调函数
    // 渲染cfi,渲染电子书到指定页位置显示
    // target:progress或则section
    display(target, cb) {
      if (target) {
        this.currentBook.rendition.display(target).then(() => {
          // 在章节切换完成后,要实现进度的同步显示,所以要刷新当前位置
          this.refreshLocation()
          if (cb) cb()
        })
      } else {
        this.currentBook.rendition.display().then(() => {
          // 在章节切换完成后,要实现进度的同步显示,所以要刷新当前位置
          this.refreshLocation()
          if (cb) cb()
        })
      }
    },
    hideTitleAndMenu () {
    // this.$store.dispatch('setMenuVisible', false)
    // 引入mapActions可以直接调用这个方法
    // 隐藏底部栏
    this.setMenuVisible(false)
    // 几个组件设置都关了
    this.setSettingVisible(-1)
    // 隐藏字体设置组件
    this.setFontFamilyVisible(false)
    },
    // 获取当前阅读时间和文本
    getReadTimeText() {
      // return 'abc'
      // 调用国际化实现,转化为分钟
      return this.$t('book.haveRead').replace('$1', getReadTimeByMinute(this.fileName))
    }
  }
}
